<template>
  <CommonCard title="今日交易用户数" value="81,014">
    <template v-slot:chart>
      <v-chart :option="getOption()" />
    </template>
    <template v-slot:footer>
      <span>退货率 </span>
      <span class="emphasis">5.14%</span>
    </template>
  </CommonCard>
</template>

<script>
import commonCardMixin from '../mixins/commonCardMixin'
export default {
  mixins: [commonCardMixin],
  methods: {
    getOption() {
      return {
        color: ['#3398DB'],
        xAxis: {
          type: 'category',
          data: [
            '00:00',
            '01:00',
            '02:00',
            '03:00',
            '04:00',
            '05:00',
            '06:00',
            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00'
          ],
          show: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'bar',
            data: [410, 82, 200, 560, 234, 820, 644, 563, 671, 245, 200, 500, 571, 522],
            barWidth: '60%'
          }
        ],
        grid: {
          top: 0,
          left: 0,
          bottom: 0,
          right: 0
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
